<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <title>scatter-charts</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/hmap-js/dist/hmap.css">
  <style>
    html, body, #map {
      height: 100%;
      padding: 0;
      margin: 0;
    }
    .hmap-control-zoom {
      right: 30px;
    }
  </style>
</head>
<body>
<div id="map"></div>
<script src="https://cdn.jsdelivr.net/npm/hmap-js/dist/hmap.js"></script>
<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.js"></script>
<script src="https://cdn.jsdelivr.net/npm/ol3-echarts/dist/ol3Echarts.js"></script>
<script src="../ajax.js"></script>
<!--<script src="../../../../packages/ol3-echarts/dist/ol3Echarts.js"></script>-->
<script>
  var map = new HMap('map', {
    controls: {
      loading: true,
      zoomSlider: true,
      fullScreen: false
    },
    view: {
      center: [113.53450137499999, 34.44104525],
      projection: 'EPSG:4326',
      zoom: 5, // resolution
    },
    baseLayers: [
      {
        layerName: 'vector',
        isDefault: true,
        layerType: 'TileXYZ',
        projection: 'EPSG:3857',
        tileGrid: {
          tileSize: 256,
          extent: [-2.0037507067161843E7, -3.0240971958386254E7, 2.0037507067161843E7, 3.0240971958386205E7],
          origin: [-2.0037508342787E7, 2.0037508342787E7],
          resolutions: [
            156543.03392800014,
            78271.51696399994,
            39135.75848200009,
            19567.87924099992,
            9783.93962049996,
            4891.96981024998,
            2445.98490512499,
            1222.992452562495,
            611.4962262813797,
            305.74811314055756,
            152.87405657041106,
            76.43702828507324,
            38.21851414253662,
            19.10925707126831,
            9.554628535634155,
            4.77731426794937,
            2.388657133974685
          ]
        },
        layerUrl: 'http://cache1.arcgisonline.cn/arcgis/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}'
      }
    ]
  });
  getJSON('../../json/scatter.json', function (res) {
    if (res) {
      var data = res.locations;
      var geoCoordMap = res.coordinates;
      var convertData = function (data) {
        var res = [];
        for (var i = 0; i < data.length; i++) {
          var geoCoord = geoCoordMap[data[i].name];
          if (geoCoord) {
            res.push({
              name: data[i].name,
              value: geoCoord.concat(data[i].value)
            });
          }
        }
        return res;
      };
      var option = {
        title: {
          text: '全国主要城市空气质量',
          subtext: 'data from PM25.in',
          sublink: 'http://www.pm25.in',
          left: 'center',
          textStyle: {
            color: '#fff'
          }
        },
        tooltip: {
          trigger: 'item'
        },
        openlayers: {},
        legend: {
          orient: 'vertical',
          y: 'top',
          x: 'right',
          data: ['pm2.5'],
          textStyle: {
            color: '#fff'
          }
        },
        series: [
          {
            name: 'pm2.5',
            type: 'scatter',
            data: convertData(data),
            symbolSize: function (val) {
              return val[2] / 10;
            },
            label: {
              normal: {
                formatter: '{b}',
                position: 'right',
                show: false
              },
              emphasis: {
                show: true
              }
            },
            itemStyle: {
              normal: {
                color: '#ddb926'
              }
            }
          },
          {
            name: 'Top 5',
            type: 'effectScatter',
            data: convertData(data.sort(function (a, b) {
              return b.value - a.value;
            }).slice(0, 6)),
            symbolSize: function (val) {
              return val[2] / 10;
            },
            showEffectOn: 'render',
            rippleEffect: {
              brushType: 'stroke'
            },
            hoverAnimation: true,
            label: {
              normal: {
                formatter: '{b}',
                position: 'right',
                show: true
              }
            },
            itemStyle: {
              normal: {
                color: '#f4e925',
                shadowBlur: 10,
                shadowColor: '#333'
              }
            },
            zlevel: 1
          }]
      };
      var echartslayer = new ol3Echarts(option, {
        stopEvent: false,
        hideOnMoving: true,
        hideOnZooming: true,
        forcedPrecomposeRerender: false,
      });

      echartslayer.on('load', (data) => {
        let center = map.getMap().getView().getCenter();
        map.getMap().getView().animate({
          center: [center[0] + 0.8, center[1] + 0.4],
          duration: 1000,
        });

        console.log(echartslayer.isVisible());

        setTimeout(() => {
          console.log(echartslayer.isVisible());
          // echartslayer.remove();
        }, 500)

        setTimeout(() => {
          console.log(echartslayer.isVisible());
          // echartslayer.remove();
        }, 2500);

        setTimeout(() => {
          data.value._zr.on('click', (event) => {
            console.log(event);
          }, this)
          // data.value.dispatchAction({
          //   type: 'click',
          //   start: 20,
          //   end: 30
          // });
        }, 3000)
      });

      echartslayer.on('load', (data) => {
        data.value.on('click', (event) => {
          console.log('click', event);
        });

        data.value.on('dblclick', (event) => {
          console.log('dblclick', event);
        });

        data.value.on('mousedown', (event) => {
          console.log('mousedown', event);
        });

        data.value.on('mousemove', (event) => {
          console.log('mousemove', event);
        });

        data.value.on('mouseup', (event) => {
          console.log('mouseup', event);
        });

        data.value.on('mouseover', (event) => {
          console.log('mouseover', event);
        });

        data.value.on('mouseout', (event) => {
          console.log('mouseout', event);
        });

        data.value.on('globalout', (event) => {
          console.log('globalout', event);
        });

        data.value.on('contextmenu', (event) => {
          console.log('contextmenu', event);
        });
      });

      echartslayer.appendTo(map.getMap());
    }
  });
</script>
</body>
</html>
